<template>

  <div class="login">
  
    <div class="wrapper">
      <van-uploader v-model="Img">
        <van-button icon="plus" color="#7232dd" >上传头像</van-button>
      </van-uploader>

      <van-cell-group inset>
        <van-field v-model="obj.username" label="用户名" placeholder="请输入用户名" />
        <van-field v-model="obj.password" label="密码" placeholder="请输入密码" />
        <van-field v-model="obj.sex" label="性别" placeholder="请输入性别" />
      </van-cell-group>
      <van-button class="blockbutton" color="#7232dd" block @click="register">注册</van-button>
      <van-button class="blockbutton" color="#7232dd" plain block @click="back">返回</van-button>
    </div>
  </div>
  
  
  </template>
  
  <script setup>
  import { Toast } from 'vant';
  import { ref,reactive,getCurrentInstance } from 'vue';
  import { useRoute,useRouter } from 'vue-router';
  import axios from 'axios';

  const proxy = getCurrentInstance()
  const route = useRoute()
  const router = useRouter()

  let Img = ref()
  
  let obj = reactive({
    username:'',
    password:'',
    sex:'',
    Img:'',
    follownum:0,
    browsenum:0,
    collectnum:0,
    browse:[],
    follow:[],
    collect:[]
  })

  function register(){
    if(Img.value && Img.value[0]){
      console.log(Img.value);
      obj.Img = Img.value[0].content
    }
    axios.post('http://localhost:3200/register',obj).then(function(res){
        if(res.data == '注册成功'){
          Toast(res.data)
          router.push('/login')
        }
        else{
          Toast(res.data)
        }
    })
}

  function back(){
    router.push('/login');
  }
  </script>
  
  <style scoped lang="less">
  .login{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .wrapper{
      margin-top: 20%;
      margin-left: 10%;
      width: 80%;
      height: 500px;
      border-radius: 20px;
      background: #4084e9;
      overflow: hidden;
      .van-uploader{
        margin-top: 20px;
        margin-left: 30%;
      }
      .van-cell-group{
        width: 90%;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 5%;
      }
      .blockbutton{
        width: 250px;
        margin-bottom: 10px;
        margin-left: 8%;
      }
    }
  }
  </style>